<template>
	<div class="root" v-if="rules!=''">
		<header-com title="竞赛规程" moduleName="match"></header-com>
		<div class="title" >
			<span class="matchName">{{rules.com_info.name}}</span><img :src="rules.com_info.logo" alt="">
		</div>
		<div class="article" v-html="rules.content"></div>
		<div class="sign-btn" @click="Apply()">前往报名</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				rules:[]
			}
		},
		created() {
			this.getRules()
		},
		methods:{
			getRules(){
				let com_id = this.$route.query.id
				console.log(com_id)
				this.$axios.post('/mobile/matching/get_rule',{com_id})
				.then(res=>{
					console.log(res)
					this.rules = res.data.data
				})
				.catch(res=>{
					console.log(res)
				})
			},
			// 前往报名
			Apply(){
				let id = this.$route.query.id
				console.log(id)
				let url = location.href
				console.log(url)
				let a = JSON.stringify(id);
				localStorage.setItem("val", a);
				this.$router.push({
				  path: "/match/apply",
				  query: {
				    id
				  }
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.root{
		.article{
			width: 90%;
			margin: 3% 5%;
			text-align: left;
			padding-bottom: 5vh;
			/deep/ img,video{
				max-width: 99%!important;
				// padding-left: 2%;
				// border: 1px solid red!important;
			}
			/deep/ h1,strong{
				border-left: 10px solid red!important;
			}
		}
		.title{
			width: 96%;
			margin: 0 auto;
			height: 50px;
			border-bottom: 1px solid #ccc;
			text-align: left;
			line-height: 45px;
			font-weight: 700;
			font-size: 18px;
			position: sticky;
			top:45px;
			background: #F6F6F6;
			left: 0;
			.matchName,img{
				vertical-align: top;
			}
			.matchName{
				display: inline-block;
				white-space: nowrap;
				width: 85%;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-left: 2%;
			}
			img{
				width: 30px;
				height: 30px;
				object-fit: cover;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}
		}
		.sign-btn{
			width: 100%;
			height: 5vh;
			background: #42B574;
			color: #fff;
			font-size: 18px;
			font-weight: 700;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			letter-spacing: 2px;
		}
	}
</style>